<template>
       <div class="rootview">
            <div class="icon" >
                 <image style="width:300px; height:300px;  background-color:rgb(101,201,251);"   src="http://192.168.43.55:8080/resource/ZHB.png"></image>
                <text  style="color:rgb(255,230,133);  font-size:60px; white-space:normal; align-items: center;"> 
                 嘉祥环保
                </text>
             </div>

            <div class="userName" >
                 <input  type=text  v-model="username"   placeholder="请输入用户名" autofocus="true" value="" style="color:gray; align-items:center; font-size:40px; justify-content:center; "></input>
            </div>
              
          <div class="userPassword">      
           <input  value=""  type=password  v-model="password"    placeholder="请输入密码"     style="color:gray; font-size:40px; align-items:center;  justify-content:center;"></input>
          </div>
     
          <div class="login">
              <div class="loginButton" @click="login">
              <text  style="color:rgb(171,209,227); white-space:normal; text-align:center; font-size:30px; align-items:center; width:500px;"> 
                登录
              </text>
            </div>
          </div>

           <div class="foot"  >
                <text  style="color:rgb(171,209,227); font-size:15px; white-space:normal; background-color:rgb(39,183,249); "> 
                版权所有©中电海康集团
               </text>
            </div>
          </div>
</template>

<style>
      .rootview {
      align-items: center; 
      background-color:rgb(39,183,249);
      flex-direction:column;
  }
      .icon {  
        align-items: center;
        text-align:center;
        margin-top:120px; 
        flex:5;
  }
  .userName {           
       width:500px;
       flex:0.8;
       background-color:rgb(101,201,251); 
       border:5px solid #27B7F9; 
       border-radius:15px; 
       
    } 
  .userPassword {
       width:500px;
       margin-top:50px; 
       flex:0.8;
       background-color:rgb(101,201,251); 
       border:5px solid #27B7F9; 
       border-radius:15px;
    }
  
   .login {
       flex:3;
    }
    
   
  .loginButton {
       width:460px;
       align-items:center;
       margin-top:50px; 
       background-color:#31A7FE; 
       border:5px solid #F4FCF8; 
       border-radius:15px;
    }

    .foot {
       flex:0.7;
    }

</style>

<script>
      var navigator = weex.requireModule('navigator')
      var modal = weex.requireModule('modal')
      var stream = weex.requireModule('stream')
      var config = require('./config.js')
      var configRes = require('./configRes.js')

  export default {

    data(){
      return{
            username:"",
            password:""
       }
    },

    methods: {   
         getLoginInfo (repo, callback) {
              return stream.fetch({
               method: 'POST',
               type: 'json',
               url: 'http://101.68.88.221:8781/jx/Mobile/' + repo,              
               body:config.toParams({
                        username:this.username,
                        password:this.password
      })
           }, callback)
        },

      login (event) {
         this.getLoginInfo('querySite!mobileLogin.action', res => {
                 var result = configRes.toParam(res.data)
             if(res.ok & String(result)===String("true")){
                 var jsonData = JSON.stringify(res.data,null,4);
                 navigator.push({
                 url: 'http://192.168.43.55:8081/stationView.weex.js',
         }, event => {
           modal.toast({ message:"登录成功"})
        })
           }else{
          modal.toast({ message: "用户名或者密码错误"})

           }
      })
         
      }
    }
  };
</script>